<template>
  <Spin :spinning="loading" tip="Loading...">
    <div>
      <!-- 搜索 -->
      <!-- 旧件不合格查询 -->
      <TopFilter ref="TopFilterss" :list="topFilterInit" :cols="3" labelWidth="120" @filterChange="changeHandle">
      </TopFilter>
      <!-- table -->
      <FilterTable ref="table" :columns="columns" :params="fetchParams" :dataSource="dataList" :datakey="'records'"
        :fetchapi="fetchApi" :onColumnsChange="columns => (this.columns = columns)" :onRowSelectChange="selectChange"
        :isSelectColumn="false">
        <template slot="controls" :slot-scope="props">
          <multiuse-button size="small" type="primary" :click="exportFileBtn.bind()">导出</multiuse-button>
        </template>
      </FilterTable>
      <!-- 责任商代码 -->
      <BaseDialog :visible.sync="responsibleAdd" :title="'责任商选择'" width="850px" destroyOnClose
        :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <ResponsibleList @close="responsibleClose" @save="responsibleSave" :rowDate="rowDate"></ResponsibleList>
      </BaseDialog>
      <!-- 旧件不合格详情 -->
      <Drawer :visible.sync="visible" :title="'旧件不合格详情'" destroyOnClose width="60%"
        :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <DetailForm @close="close" :rowData="stockId"></DetailForm>
      </Drawer>
      <!-- 旧件不合格调整页面 -->
     <!--  <Drawer :visible.sync="visible1" :title="'旧件不合格调整'" destroyOnClose width="60%"
        :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <EditForm @close="close" :rowData="stockId"></EditForm>
      </Drawer> -->

    </div>
  </Spin>
</template>
<script>
import DetailForm from './DetailForm.vue'
//import EditForm from './EditForm.vue'
import { exportExcelFile } from '@/utils/index';
import { getListByPage, getListForExportNew,getListByExampleWhere } from '@/api/usedPartsReturnManage/usedPartsReturn_OEM/usedPartsFail';
import ResponsibleList from '@/pages/claimDemage/tools/ResponsibleList.vue';
import { getAppId } from '@/assets/js/auth';

export default {
  components: {
    //EditForm,
    DetailForm,
    ResponsibleList,
  },
  data() {
    this.searchstore();
    return {
      loading: false,
      dataList: [],
      visible: false,
      //visible1: false,
      responsibleAdd: false,
      rowDate: {},
      stockId: null,
      fetchApi: getListByPage,
      topFilterInit: this.topFilterInitFun(),
      columns: this.creatHeader(),
      fetchParams: {}, //ipa 接口
      selectedRows: [], //选中服务站
      dealerList: [],
    };
  },

  methods: {
    // 导出
    async exportFileBtn() {
      try {
        let params = { ...this.fetchParams }
        let res = await getListForExportNew(params);
        exportExcelFile(res.data, '旧件不合格列表')
      } catch (err) {
        console.warn(err)
      }
    },
    //searchstore
    async searchstore() {
      try {
        const res = await getListByExampleWhere();
        this.topFilterInit.find(item => item.fieldName === 'whName').itemList = res.data.map(x => ({ value: x.WH_NAME, text: x.WH_NAME }));
      } catch (err) {
        console.log(err);
      }
    },
    //责任商选择函数
    selectResponsibleCode() {
      this.responsibleAdd = true;
    },
    //取消
    responsibleClose() {
      this.responsibleAdd = false;
    },
    //确定
    responsibleSave(obj) {
      this.topFilterInit.find(x => x.fieldName == 'supplierCode').initialValue = obj[0].responsibleCode;
      this.topFilterInit.find(x => x.fieldName == 'supplierName').initialValue = obj[0].responsiblePerson;
      this.supplierCode = obj[0].responsibleCode;
      this.supplierName = obj[0].responsiblePerson;
      this.responsibleAdd = false;
      this.fetchParams = { ...this.fetchParams };
    },

    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      this.TurnOn =
        console.log(this.selectedRows);
    },
    close() {
      this.visible = false;
      //this.visible1 = false;
    },

    chooseOrderNo(val) {
      this.stockId = val;
      this.visible = true;
    },
   /*  chooseOrderNo1(val) {
      this.stockId = val;
      this.visible1 = true;
    }, */

    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({ ownerCode: this.ownerCode }, this.fetchParams, val, { xhrAbort: false });
      console.log(val);
    },
    //查询框
    topFilterInitFun() {
      return [

        { type: 'INPUT', label: '旧件代码', fieldName: 'partCode', placeholder: '请输入旧件代码...', initialValue: '' },
        { type: 'INPUT', label: '旧件名称', fieldName: 'partName', placeholder: '请输入旧件名称...', initialValue: '' },
        {
          type: 'INPUT',
          label: '责任商代码',
          fieldName: 'supplierCode',
          readonly: true,
          placeholder: '请选择责任商代码...',
          //rules: [{ message: '请选择责任商', trigger: 'blur' }],
          unitRender: p => {
            return (
              <div>
                <multiuse-button icon="el-icon-search" onClick={() => this.selectResponsibleCode()} />
              </div>
            );
          }
        },
        { type: 'INPUT', label: '责任商名称', fieldName: 'supplierName', placeholder: '请输入责任商名称...', initialValue: '' },
        {
          type: 'SELECT',
          label: '仓库',
          fieldName: 'whName',
          placeholder: '请选择仓库...',
          rules: [{ message: '请选择仓库...', trigger: 'change' }],
          itemList: [],
          initialValue: '',
        },
      ]
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          fixed: 'left',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 80,
          render: (props, h) => {
            return (
              <div style="text-align:center">
                {/* <multiuse-button size="mini" type="text" onClick={() => this.chooseOrderNo1(props.row)}>
                  库存调整
                </multiuse-button> */}
                <multiuse-button size="mini" type="text" onClick={() => this.chooseOrderNo(props.row)}>
                  明细
                </multiuse-button>
              </div>
            );
          }
        },
        { title: '仓库', dataIndex: 'whName', sorter: true, width: 160 },
        { title: '旧件代码', dataIndex: 'partCode', sorter: true, width: 160 },
        { title: '旧件名称', dataIndex: 'partName', sorter: true, width: 220 },
        { title: '责任商代码', dataIndex: 'supplierCode', sorter: true },
        { title: '责任商名称', dataIndex: 'supplierName', sorter: true, width: 220 },
        { title: '库存数量', dataIndex: 'stockCount', sorter: true },
        { title: '入库数量', dataIndex: 'inCount', sorter: true },
        { title: '出库数量', dataIndex: 'outCount', sorter: true },
      /*   { title: '调整人', dataIndex: 'updatedBy', sorter: true },
        { title: '调整日期', dataIndex: 'updatedAt', sorter: true, dateFormat: 'YYYY-MM-DD' },
 */
      ];
    }
  }
};
</script>

<style lang="less" scoped>

</style>
